<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>动画</title>
  <!-- 使用其他动画插件 -->
  <!-- <link rel="stylesheet" href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css"> -->
  <link rel="stylesheet" href="./animate.css">
  <script src="./vue.js"></script>
  <style>
  .v-enter,
  .v-leave-to {
    opacity: 0;
    transform: translateX(200px);
  }

  .v-enter-active,
  .v-leave-active {
    transition: all 0.8s ease;
  }

  .my-enter,
  .my-leave-to {
    opacity: 0;
    transform: translateY(200px);
  }

  .my-enter-active,
  .my-leave-active {
    transition: all 0.8s ease;
  }

  .ball{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: skyblue;
  }
  </style>
</head>
<body>
  <div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <transition>
      <h3 v-if="flag">这是一个动画</h3>
    </transition>

    <hr>

    <input type="button" value="toggle" @click="flag2=!flag2">
    <transition name="my">
      <h3 v-if="flag2">这是一个动画,自定义动画，自定义前缀</h3>
    </transition>

    <hr>
    <!-- 其他动画插件实现 -->
    <input type="button" value="toggle" @click="flag3=!flag3">
    <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="400">
      <!-- 可以用 :duratin=" {enter:'400', leave:'500'} " 来指定入场和离场的时间 -->
      <h3 v-if="flag3" class="animated">其他动画插件实现</h3>
    </transition>
    <hr>
    <!-- 半场动画 -->
    <input type="button" value="加入购物车" @click="flag4=!flag4">
    <transition 
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:after-enter="afterEnter">

      <div class="ball" v-show="flag4"></div>
    </transition>

    <!-- 在实现列表过渡的时候， 如果需要过渡的元素是通过v-for循环渲染出来的
    不能使用 transition 包裹， 需要使用 transiton-group -->
    <!-- 
      <ul>
      <transition-group>  会把transition渲染成 span 元素
      <li v-for="item in list" :key="item.id">
        {{item.id}} --- {{item.name}}
      </li>
    </transition-group> 
  </ul>
  -->
  <!-- 给 transition-group 添加 appear 属性， 实现入场时候的效果 -->
  <!-- <transition-group tag="ul">
      <li v-for="item in list" :key="item.id">
        {{item.id}} --- {{item.name}}
      </li>
    </transition-group> 
  </div> 
  指定渲染ul元素， 默认渲染成span元素
-->
  

</body>
<script>
new Vue({
  el: "#app",
  data: {
    flag: false,
    flag2: false,
    flag3: false,
    flag4: false
  },
  methods: {
      // 动画钩子函数的第一个参数： el 表示 要执行动画的那个元素，是个原生的DOM元素，
      // 可以认为 el是通过 documnet.getElementById("") 方式获取到的原生JS DOM对象
    beforeEnter(el){
      // 动画执行之前， 动画尚未开始
      el.style.transform = "translate(0, 0)";
    },
    enter(el){
      // 这句话没有实际的作用，但是没有没有写，动画效果出不来
      el.offsetWidth;

      // 表示动画开始之后的样式， 可以设置小球完成动画之后的结束状态
      el.style.transform = "translate(150px, 450px)";
      el.style.transition = "all 1s linear";
    },
    afterEnter(el){
      this.flag4 = false;
    }
  }
})
</script>
</html>